<template>
    <!-- ✅ 外层容器：控制整体居中 -->
    <div class="page-container">
        <div class="content-wrapper">
            <!-- 动态标题 -->
            <div class="table-header">
                <h2>{{ tableTitle }}</h2>
            </div>

            <div class="info-bar">
                <!-- 左边：时间周期 + 金额统计 -->
                <div class="info-header">
                    <div v-if="start_date && end_date">
                        <span>时间周期: {{ start_date }} 到 {{ end_date }}</span>
                    </div>
                    <div v-if="totalPaymentAmount !== null">
                        <span>支付总金额: ¥{{ totalPaymentAmount }}</span>
                    </div>
                    <div v-if="totalRefundAmount !== null">
                        <span>退款总金额: ¥{{ totalRefundAmount }}</span>
                    </div>
                    <div v-if="refundRatio !== null">
                        <span>退款比例: {{ refundRatio }}%</span>
                    </div>
                </div>
            </div>

            <!-- 表格 -->
            <el-table
                    :data="filteredTableData"
                    border
                    size="medium"
                    style="width: 100%"
                    max-height="calc(100vh - 400px)"
            >
            <el-table-column
                    v-for="(field, index) in tableFields"
                    :key="index"
                    :prop="field"
                    :label="field"
                    sortable
            />
            </el-table>

            <TrendLineChart
                    :trend-data="trendData"
                    :trend-lines="trendLines"
                    :color-map="trendLinesColorMap"
            />
        </div>
    </div>
</template>

<script setup>
    import {ref, computed, onMounted} from "vue";
    import TrendLineChart from "./TrendLineChart.vue";
    import api from "../../api";
    import {useRoute} from 'vue-router'

    const route = useRoute()
    // 获取参数
    const date_or_month = route.query.date_or_month
    const start_date = route.query.start_date
    const end_date = route.query.end_date
    const shop_name = route.query.shop_name
    const is_self = route.query.is_self
    const type = route.query.type
    const account_or_channel = route.query.account_or_channel



    /* 示例数据 */
    // const tableData = ref([
    //     { 日期: "2025-10-01", 支付金额: 8646.54, 支付比例: "14.11%", 退款金额: 4704.0, 退款比例: "51.54%" },
    //     { 日期: "2025-10-02", 支付金额: 7646.54, 支付比例: "14.11%", 退款金额: 4304.0, 退款比例: "51.54%" },
    //     { 日期: "2025-10-03", 支付金额: 8046.54, 支付比例: "14.11%", 退款金额: 3704.0, 退款比例: "51.54%" },
    //     { 日期: "2025-10-04", 支付金额: 8646.54, 支付比例: "14.11%", 退款金额: 4004.0, 退款比例: "51.54%" },
    //     { 日期: "2025-10-05", 支付金额: 8946.54, 支付比例: "14.11%", 退款金额: 4504.0, 退款比例: "51.54%" },
    //     { 日期: "2025-10-06", 支付金额: 5646.54, 支付比例: "14.11%", 退款金额: 4604.0, 退款比例: "51.54%" },
    //     { 日期: "2025-10-07", 支付金额: 6646.54, 支付比例: "14.11%", 退款金额: 3704.0, 退款比例: "51.54%" },
    //     { 日期: "2025-10-08", 支付金额: 9646.54, 支付比例: "14.11%", 退款金额: 2904.0, 退款比例: "51.54%" },
    //     { 日期: "2025-10-09", 支付金额: 8006.54, 支付比例: "14.11%", 退款金额: 3204.0, 退款比例: "51.54%" },
    //     { 日期: "2025-10-10", 支付金额: 8126.54, 支付比例: "14.11%", 退款金额: 4105.0, 退款比例: "51.54%" },
    //     { 日期: "2025-10-01", 支付金额: 8646.54, 支付比例: "14.11%", 退款金额: 4704.0, 退款比例: "51.54%" },
    //     { 日期: "2025-10-02", 支付金额: 7646.54, 支付比例: "14.11%", 退款金额: 4304.0, 退款比例: "51.54%" },
    //     { 日期: "2025-10-03", 支付金额: 8046.54, 支付比例: "14.11%", 退款金额: 3704.0, 退款比例: "51.54%" },
    //     { 日期: "2025-10-04", 支付金额: 8646.54, 支付比例: "14.11%", 退款金额: 4004.0, 退款比例: "51.54%" },
    //     { 日期: "2025-10-05", 支付金额: 8946.54, 支付比例: "14.11%", 退款金额: 4504.0, 退款比例: "51.54%" },
    //     { 日期: "2025-10-06", 支付金额: 5646.54, 支付比例: "14.11%", 退款金额: 4604.0, 退款比例: "51.54%" },
    //     { 日期: "2025-10-07", 支付金额: 6646.54, 支付比例: "14.11%", 退款金额: 3704.0, 退款比例: "51.54%" },
    //     { 日期: "2025-10-08", 支付金额: 9646.54, 支付比例: "14.11%", 退款金额: 2904.0, 退款比例: "51.54%" },
    //     { 日期: "2025-10-09", 支付金额: 8006.54, 支付比例: "14.11%", 退款金额: 3204.0, 退款比例: "51.54%" },
    //     { 日期: "2025-10-10", 支付金额: 8126.54, 支付比例: "14.11%", 退款金额: 4105.0, 退款比例: "51.54%" },
    // ]);

    const tableData = ref([]);
    const tableFields = ref(["日期", "支付金额", "退款金额"]);

    const filteredTableData = computed(() => tableData.value);

    // const trendData = ref({
    //     days: ["2025-10-01","2025-10-02","2025-10-03","2025-10-04","2025-10-05","2025-10-06","2025-10-07","2025-10-08","2025-10-09","2025-10-10"],
    //     pay: ["8646.54","7646.54","8046.54","8646.54","8946.54","5646.54","6646.54","9646.54","8006.54","8126.54"],
    //     refund: ["4704.0","4304.0","3704.0","4004.0","4504.0","4604.0","3704.0","2904.0","3204.0","4105.0"],
    // });

    const trendData = ref({});

    const trendLines = ref([
        { key: "pay", label: "支付金额", visible: true },
        { key: "refund", label: "退款金额", visible: false },
    ]);
    const trendLinesColorMap = {
        pay: "#4472c4",
        refund: "#70ad47",
    };

    const tableTitle = computed(() => {

        let res = shop_name

        if (is_self === "self") {
            res += " - 自营"
        } else {
            res += " - 合作"
        }
        res += " - " + type + " - "+ account_or_channel + " - 金额统计"

        return res;
    });

    const totalPaymentAmount = computed(() =>
        filteredTableData.value.reduce((sum, item) => sum + (parseFloat(item["支付金额"]) || 0), 0).toFixed(2)
    );
    const totalRefundAmount = computed(() =>
        filteredTableData.value.reduce((sum, item) => sum + (parseFloat(item["退款金额"]) || 0), 0).toFixed(2)
    );
    const refundRatio = computed(() => {
        const pay = parseFloat(totalPaymentAmount.value);
        const refund = parseFloat(totalRefundAmount.value);
        return pay ? ((refund / pay) * 100).toFixed(2) : 0;
    });
    const period = computed(() => ({ start: "2025-10-01", end: "2025-10-10" }));

    const init_datas = async (date_or_month, star_parm, end_parm, shop_name, is_self, type,account_or_channel) => {
        // {"date_or_month":"month", "star_parm":"2025-10",
        //     "end_parm":"2025-10","shop_name":"ROOKIE官方旗舰店", "is_self":"self", "type":"直播"}
        // 可在这里请求后端接口，更新趋势数据
        const res = await api.post("/douyin_project_analysis/table_and_tand_line", {
            date_or_month: date_or_month,
            star_parm: star_parm,
            end_parm: end_parm,
            shop_name: shop_name,
            is_self: is_self,
            type: type,
            account_or_channel: account_or_channel
        });


        tableData.value = res.data.tableData;
        trendData.value = res.data.trendLines;

        // cards.value = res.data.zong_kan_ban_datas;
        // zhengTiTrendData.value = res.data.zheng_ti_cheng_jiao_line_datas;
        // allShopDatas.value = res.data.shop_datas;
    }

    onMounted(() => {
        // 可在这里请求后端接口，更新趋势数据
        init_datas(date_or_month, start_date, end_date, shop_name, is_self, type,account_or_channel)

    })
</script>

<style scoped>
    /* ✅ 页面居中容器 */
    .page-container {
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: flex-start; /* 顶部对齐，可改为 center 实现垂直居中 */
        width: 100%;
        background-color: #f5f7fa; /* 浅灰背景，更像仪表盘 */
        padding: 5px 0;
        box-sizing: border-box;
    }

    /* ✅ 内容区域（控制宽度） */
    .content-wrapper {
        width: 100%;
        max-width: 1750px; /* 最大宽度，避免超宽 */
        /*background: #fff;*/
        /*border-radius: 12px;*/
        padding: 0 32px;
        /*box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);*/
        /*box-sizing: border-box;*/
    }

    /* 标题 */
    .table-header {
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        /*margin-bottom: 16px;*/
    }

    /* 信息栏 */
    .info-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 16px;
        margin-bottom: 20px;
    }
    .info-header {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 16px;
    }
    .info-header > div {
        background: #f9fbff;
        padding: 6px 12px;
        border-radius: 6px;
        border: 1px solid #dbe3f0;
        font-size: 15px;
        color: #333;
        font-weight: 500;
    }

    /* 表格 */
    .el-table {
        max-height: 400px;
        overflow-y: auto;
    }

    /* 📱 移动端优化 */
    @media (max-width: 768px) {
        .page-container {
            padding: 20px 10px;
        }
        .content-wrapper {
            width: 100%;
            padding: 16px;
        }
        .info-bar {
            flex-direction: column;
            align-items: flex-start;
        }
    }
</style>
